<div style="border-bottom:1px solid #e5e5e5;padding-bottom:35px;width:100%;">
	<div class="container w1000">
		<div class="row">
			<div class="span3 artileimg1">
				<img src="/img/index/bg_skygress.png" /> 
			</div>
			<div class="span9 articlewenzi1">
				<p>
					1、	学会用canvas作为纹理
				</p>
				<p>
					2、	学会纹理的更新
				</p>
			</div>
		</div>
	</div>
</div>
<div class="container w1000">
	<div class="row">
		<h2 class="title" style="font-size:20px;">
			1、白话纹理原理
		</h2>
	</div>
	<div class="row">
		<div class="span2">
		</div>
		<div class="span10 articlewenzi2">
			<p>
				从本质上来说，纹理只是图片而已，它是由像素点组成。无论在内存还是显存中，它都是由4个分量组成，这四个分量是R、G、B和A。唯一的不同的，在显存中，会比内存中更快的渲染到显示器上。这是毋庸置疑的，因为显存中的帧缓冲本来就是和显示器上 的像素一一对应的。
			</p>
			<p>
				从上面的概念中，我们就能够引申出一些重要的理解了，就是只要是图像数据，准确的说是内存或者显存中的图像数据，都可以作为纹理，显示在屏幕中。
			</p>
			<p>
				上面的课程，我们讲了通过loadtexture函数在服务器上加载一张图片作为纹理，这一节课，我们来讲通过html中的canvas来作为纹理。它非常重要，以后的课程中我们会经常使用这个技巧。
			</p>
			<p>
				它们两者之间有很多差别，这个差别就是图片和canvas的差别，图片是通过图像处理软件，如photoshop来处理的。而canvas是通过浏览器的绘图API来绘制的。显示canvas能够给程序员更多的想象空间，从而做出更有意思的效果出来。
			</p>
		</div>
	</div>
</div>
<div class="container w1000">
	<div class="row">
		<h2 class="title" style="font-size:20px;">
			2、本节效果展示
		</h2>
	</div>
	<div class="row">
		<div class="span2">
		</div>
		<div class="span10 articlewenzi2">
			<p>
				本节的效果，是一个可以旋转的三维时钟。如下图所示，你可以在【初级教程\chapter6\6-6.html】找到本课的代码。也可以在线预览，请打开代码，然后对照下面的解释来阅读。
			</p>
			<p>
				<img src="/attached/image/20130827/20130827161112_628.jpg" width="530" height="338" alt="" /> 
			</p>
			<p>
				发现了它与普通时钟的区别了吗？首页它在正方体的6个面都有时钟的效果，而且时钟是每秒钟都更新一次的，能够准确的反应当前的时间。下面我们来介绍一下，这一关于canvas作为纹理的知识。
			</p>
		</div>
	</div>
</div>
<div class="container w1000">
	<div class="row">
		<h2 class="title" style="font-size:20px;">
			3、时钟纹理生成过程
		</h2>
	</div>
	<div class="row">
		<div class="span2">
		</div>
		<div class="span10 articlewenzi2">
			<p>
				实现这个效果的步骤可以用下面的框图来表示：
			</p>
			<p>
				<img src="/attached/image/20130827/20130827160832_276.jpg" alt="" /> 
			</p>
			<h3>
				1、在canvas上画时钟
			</h3>
			<p>
				由于时钟的秒针会每秒滴答一次，那么canvas中的内容，其本身就会被更新一次。我们将在canvas中绘制时钟的代码放到了【初级教程\chapter6\clock.js】中。打开代码，你会发现它非常熟悉，这里的函数都是html5绘制canvas的基本函数，只不过其逻辑需要对照代码好好来理解一下，不过这都不是我们的重点了在，重点是它能画出如下的图像来，这段代码在【初级教程\chapter6\6-7.html】中能够找到。
			</p>
			<p>
				<img src="/attached/image/20130827/20130827160606_124.jpg" width="202" height="203" alt="" /> 
			</p>
			<h3>
				2、将canvas传递给THREE.Texture纹理
			</h3>
			<p>
				Canvas可以作为纹理传递给THREE.Texture函数，纹理的构造函数是：
			</p>
			<p>
				THREE.Texture = function ( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy )
			</p>
			<p>
				这个函数的第一个参数image，接收一个image类型的图像，或者canvas，后面的参数可以暂时不理会，它会以默认值去填充texture后面的参数。
			</p>
			<p>
				这里我们只需要将canvas传递给Texture就ok了，代码如下：
			</p>
			<p>
				texture = new THREE.Texture( canvas);
			</p>
			<p>
				那么纹理怎么知道其每一个像素怎么映射到形状状的表面呢，默认情况下，纹理被均匀分配到四边形的各个顶点上。
			</p>
			<h3>
				3、将纹理传递给THREE.MeshBasicMaterial材质
			</h3>
			<p>
				将texture传递给材质就更简单了，材质本身可以接受一个属性名为map的参数，代码如下：
			</p>
			<p>
				var material = new THREE.MeshBasicMaterial({map:texture});
			</p>
			<p>
				这样就将纹理赋给了材质。
			</p>
			<h3>
				4、构造THREE.Mesh
			</h3>
			<p>
				在我们的中级教程中，详细的讲解过Mesh，从它的概念，组成，怎么将几何体和材质融合一体，又怎么知道几何体和材质是否发生变化，怎么更新Mesh动画，几乎都讲了一遍，可以说是目前最为完整的3DMesh教程。不过这里篇幅有限，而Mesh又确实需要太多的笔墨去讲解，所以，这里就一笔带过了。
			</p>
			<p>
				Mesh就是一个网格表面，它代表着我们渲染到3D世界中的各种模型。其构造函数如下：
			</p>
			<p>
				THREE.Mesh = function ( geometry, material )
			</p>
			<p>
				它接受2个参数，一个是几何体，一个是材质。
			</p>
			<p>
				Mesh就是一个网格表面，它代表着我们渲染到3D世界中的各种模型。其构造函数如下：
			</p>
			<p>
				THREE.Mesh = function ( geometry, material )
			</p>
			<p>
				它接受2个参数，一个是几何体，一个是材质。
			</p>
			<p>
				这里我们这样来构造它：
			</p>
			<p>
				mesh = new THREE.Mesh( geometry,material );
			</p>
			<p>
				其中geometry是一个THREE.CubeGeometry表示的正方体。
			</p>
			<p>
				ok，经过这4步，我们的代码就可以运行了。
			</p>
		</div>
	</div>
</div>
<div class="container w1000">
	<div class="row">
		<h2 class="title" style="font-size:20px;">
			4、总结
		</h2>
	</div>
	<div class="row">
		<div class="span2">
		</div>
		<div class="span10 articlewenzi2">
			<p>
				好了，最后，我们来看看，我们的所有代码,代码中"&lt;后的-",请忽略掉，是因为html排版的原因被加上。
			</p>

<pre class="prettyprint lang-js syntax brush-javascript">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;style&gt;
        body {
            margin: 0px;
            background-color: #000000;
            overflow: hidden;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body onload="start();"&gt;

&lt;script src="../js/three.js"&gt;&lt;/script&gt;
&lt;script src="./clock.js"&gt;&lt;/script&gt;

&lt;script&gt;

    var camera, scene, renderer;
    var mesh;
	var texture;
	
	function start()
	{
		clock();
		init();
		animate();
	}

    function init() {

        renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );
        //
        camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
        camera.position.z = 400;
        scene = new THREE.Scene();
		
		var geometry = new THREE.CubeGeometry(150, 150, 150);
		texture = new THREE.Texture( canvas);
        var material = new THREE.MeshBasicMaterial({map:texture});
		texture.needsUpdate = true;
        mesh = new THREE.Mesh( geometry,material );
        scene.add( mesh );

        //
        window.addEventListener( 'resize', onWindowResize, false );
    }

    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize( window.innerWidth, window.innerHeight );
    }

    function animate() {
		texture.needsUpdate = true;
		mesh.rotation.y -= 0.01;
		mesh.rotation.x -= 0.01;
        requestAnimationFrame( animate );
        renderer.render( scene, camera );
    }

&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>


			<p>
				代码中clock.js就是绘制时钟的代码，里面有一个全局变量canvas，表示canvas本身。另外，需要注意的是在定义了纹理之后，我们将texture.needsUpdate设置为了true，如果不设置为true，那么纹理就不会更新，很可能你看到的是一个黑色的正方体，原因是纹理没有被载入之前，就开始渲染了，而渲染使用了默认的材质颜色。
			</p>
			<p>
				这是什么原因呢？是这样的，纹理的绘制是需要一段时间的，javascript是可以异步运行的，在canvas绘制出时钟之前，可能three.js就开始根据纹理渲染图形了。如果纹理不更新，那么正方体一直会是以前没有绘制完成的纹理，很可能是材质本身的颜色。
			</p>
			<p>
				另一个方面，canvas由于绘制的是时钟，其每一秒都会重新绘制一次，所以为了让正方体上的纹理可以及时反映canvas上的时钟，也需要不断的更新纹理，所以需要将needUpdate设置为true，不过缺点是其效率会低一些，不过这种效率的降低，是完全可以接受的。
			</p>
			<p>
				好了，那么这一节，我们就讲到这里，WebGL中文网的全体同仁都将为您服务。我们不仅提供优秀的教程，而且提供专业的在线答疑。希望大家支持，您的付出，将绝对不会后悔。
			</p>
			<p>
				我们有信心，在您学完WebGL中文网的课程后，做一个漂亮的3D游戏或者3D网站，一点没有问题。
			</p>
		</div>
	</div>
</div>